<template>
  <div id="app" class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msg1 }}</h1>
    <h1><el-button @click="login">login</el-button></h1>
    <!-- <router-link to="/login"><el-button>login</el-button></router-link>
    <router-link to="/hemo"><el-button>hemo</el-button></router-link>
    <router-view/> -->
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      msg: "Welcome to Your Vue.js Login",
      msg1: "欢迎Dylan",
      input: "",
    };
  },
  mounted() {
    // console.log('login')
  },
  methods: {
    login() {
      console.log(this.input);
      /* 三种路由跳转
      1、router-link 实现跳转最简单的方法】
      2、this.$router.push({ path:’/user’})常用于路由传参，用法同第三种
        this.$router.push({  //核心语句
          path:'/select',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
            id:this.id,
          }
        })
        created(){ //生命周期里接收参数
            this.id = this.$route.query.id,  //接受参数关键代码
            console.log(this.id)
        }
        2.1. query和params区别
        query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
        params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失,并且只能用 name
      3、this.$router.replace{path：‘/’ }类似，不再赘述 */
      // https://www.jianshu.com/p/6e1bacd35f59
      this.$router.push({
        path: "./home",
        query: {
          id: "login",
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-input {
  width: 20%;
  margin: 0 40%;
}
</style>
